<template>
    <div class="ui_step">
        <span class="title">订单状态：</span>
        <el-steps class="ui_step_list" :active="active" align-center>
            <el-step v-for="item in step" :title="item.label" :description="item.value" :key="item.label" />
        </el-steps>
    </div>
</template>
<script setup>
import {ElSteps, ElStep} from "element-plus"
import { ref } from "vue";
const props = defineProps(['orderInfo'])
const status = ["收单", "数据采集", "授信", "贷款受理"]
const list = [
    {label: "收单阶段", value: "处理中"},
    {label: "数据采集", value: "处理中"},
    {label: "授信阶段", value: "处理中"},
    {label: "贷款受理", value: "处理中"}
] 
const active = ref()
const step = ref([])
const init = () => {
    let AcKey = props.orderInfo.filter(item => item.label === "订单阶段")[0]?.value || '';
    let statu = props.orderInfo.filter(item => item.label === "阶段状态")[0]?.value || '';
    active.value = status.indexOf(AcKey);
    list.forEach((item, index) => {
        if(active.value > index) {item.value = "成功"}
        else if(active.value === index) {item.value = statu}
    })
    step.value = list
}
init()
console.log(step);
</script>
<style scoped>
.ui_step{
    display: flex;
    align-items: center;
    margin: 10px 20px;
}
.title{
    width: 120px;
    text-align: right;
}
.ui_step_list{
    flex: 1;
}
</style>